import assets from 'modules/assets';
import React, { useEffect, useRef, useState } from 'react';
import { Image, View, ViewStyle, Text } from 'react-native';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import TreeSelect, { TreeItem } from 'react-native-tree-select';

import * as styles from './style';
import { Division, Toast, RadiusButton } from 'components';
import { translateSize } from 'styles';

interface IProps {
	style?: ViewStyle
	treeData?: TreeItem[],
	onConfirm: (id: string) => void,
	onCancel: () => void
}

const QccTreeSelect: React.FC<IProps> = props => {

	const [treeData, setTreeData] = useState([]);
	const [itemId, setItemId] = useState<string>('');

	useEffect(() => {
		setTreeData(props.treeData)
	}, [props.treeData]);


	return <View style={[styles.container, props.style]}>
		<View style={styles.innerContainer}>
			<ScrollView style={{ flex: 1 }}>
				<View style={{ ...styles.content, borderWidth: 1, borderStyle: "solid", borderColor: '#bbb' }}>
					<TreeSelect
						data={treeData}
						// isOpen
						// openIds={['A01']}

						// defaultSelectedId={[itemId]}
						isShowTreeId={false}
						// selectType="single"
						// selectType="multiple"
						itemStyle={{
							// backgroudColor: '#8bb0ee',
							fontSize: 12,
							color: '#995962'
						}}
						selectedItemStyle={{
							backgroundColor: '#f7edca',
							fontSize: 16,
							color: '#171e99'
						}}
						// onClick={this._onClick}
						onClickLeaf={(p) => setItemId(p.item.id)}
						treeNodeStyle={{
							// openIcon: <Icon size={18} color="#171e99" style={{ marginRight: 10 }} name="ios-arrow-down" />,
							// closeIcon: <Icon size={18} color="#171e99" style={{ marginRight: 10 }} name="ios-arrow-forward" />
							openIcon: <Image
								resizeMode="stretch"
								style={{ width: 18, height: 18 }}
								source={assets.images.icon_arrow_down} />,
							closeIcon: <Image
								resizeMode="stretch"
								style={{ width: 18, height: 18 }}
								source={assets.images.icon_arrow_right} />
						}}
					/>
				</View>
			</ScrollView>
			<Division />
			<View style={styles.bottomContainer}>
				<RadiusButton style={{
					backgroundColor: 'transparent', height: translateSize(80),
					width: translateSize(200),
				}} onPress={() => {
					if (typeof (itemId) === "undefined" || itemId === "") {
						Toast.show('请选择款项！')
						return
					}
					props.onConfirm(itemId)
				}}>
					<Text style={styles.comfirm}>确定</Text>
				</RadiusButton>
				<RadiusButton style={{
					backgroundColor: 'transparent', height: translateSize(80),
					width: translateSize(200),
				}} onPress={() => {
					props.onCancel()
				}}>
					<Text style={styles.cancel}>取消</Text>
				</RadiusButton>
			</View>
		</View>
	</View>
}

export default QccTreeSelect

